import React from "react";
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import url from 'url'
import {Modal, Button, WhiteSpace, WingBlank, Toast} from 'antd-mobile';
import {newStory} from "../../api";
import ImageUploader from '@looop/quill-image-uploader'
import reqwest from "reqwest"

const alert = Modal.alert;

export default class CreateStory extends React.Component {
    constructor(props) {
        super(props)
        this.state = {text: ''} // You can also pass a Quill Delta here
        this.handleChange = this.handleChange.bind(this)
        if (this.props.location.search) {
            this.type = url.parse(this.props.location.search, true).query.type
            this.bgSrc = '/img/tj/' + (this.type * 11) + '.png'
        }
    }
    modules = {
        toolbar: [
            [{'header': [1, 2, false]}],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
        ],
        imageUploader: {
            upload: file => {
                console.log(123123)
                return new Promise((resolve, reject) => {
                    reqwest({
                        url: "http://api.tjxl.vooo.xyz/upload?format=json",
                        method: "post",
                        headers:{
                            'Content-Disposition':'attachment;filename=upload.jpg'
                        },
                        // crossOrigin: true,
                        // contentType: "application/json",
                        processData: false,
                        data: file,
                        success: (res) => {
                            console.log(res)
                            resolve("http://api.tjxl.vooo.xyz/"+res.url)
                        },
                        error: (err) => {
                            console.log(err);
                            reject()
                        }
                    });
                });
            }
        }
    }

    formats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'indent',
        'link', 'image', 'imageBlot'
    ]


    handleChange(value) {
        console.log(value)
        this.setState({text: value})
    }

    render() {
        const style = {
            backgroundImage: 'url("' + this.bgSrc + '")',
            backgroundRepeat: 'no-repeat',
            backgroundSize: '100% 100%',

            paddingBottom: 66,
            borderStyle: 'solid',
            borderWidth: 16,
            borderColor: '#86c4cd',
            borderRadius: 16,
            height: 400
        }
        return (
            <div>
                <WhiteSpace/>
                <WingBlank>
                    <div style={{width: '100%', height: '100%', textAlign: "center"}}>
                        <ReactQuill value={this.state.text}
                                    style={style}
                                    modules={this.modules}
                                    formats={this.formats}
                                    onChange={this.handleChange}/>
                        <img onClick={this.showAlert} style={{paddingTop: '8%', paddingBotton: '8%', width: '72%'}}
                             src="/img/tj/资源 46@2x.png" alt=""/>
                    </div>
                </WingBlank>
            </div>
        );
    }

    postStory = async () => {
        console.log("fff")
        if (!this.type) {
            alert("心情卡类型数据异常")
            return
        }
        if (!this.state.text) {
            alert("文本内容不能为空")
            return
        }
        try {
            let res = await newStory(this.type, this.state.text)
            this.props.history.push('/success')
        } catch (e) {
            alert("发布失败")
            console.log(e)
        }
    }
    showAlert = () => {
        const alertInstance = alert('发布', '确认发布吗?', [
            {text: '取消', onPress: () => console.log('ok'), style: 'default'},
            {text: '确认', onPress: this.postStory},
        ]);
    };
}